<template>
  <div id="side-guide">
    <div class="guide-top">
      <div class="guide-item" @click="showPersonal">
        <img :src="imgBaseUrl+userInfo.img" alt="">
      </div>
      <div class="guide-item" @click="goto('/main/chats')" :class="{on: isChats}">
        <Badge :count="totalCount" v-if="!isChats"><span class="iconfont icon-icon1"></span></Badge>
        <Badge :count="totalCount" v-else><span class="iconfont icon-liaotianliebiao-yigai"></span></Badge>
      </div>
      <div class="guide-item" @click="goto('/main/contacts')" :class="{on: isContacts}">
        <Badge :count="newFriendCount" v-if="!isContacts"><span class="iconfont icon-contacts"></span></Badge>
        <Badge :count="newFriendCount" v-else><span class="iconfont icon-lianxiren"></span></Badge>
      </div>
      <div class="guide-item" @click="goto('/main/discover')" :class="{on: isDiscover}">
        <span class="iconfont icon-faxian2" v-if="!isDiscover"></span>
        <span class="iconfont icon-faxian1" v-else></span>
      </div>
    </div>
    <div class="guide-bottom">
      <div class="guide-item" @click="showMenu=!showMenu">
        <span class="iconfont icon-caidan1"></span>
      </div>
      <transition name="show">
        <div class="menu" v-show="showMenu">
          <ul>
            <li @click="showAddFriendModal">添加好友</li>
            <li @click="showLogoutModal">退出登录</li>
          </ul>
        </div>
      </transition>
    </div>
    <AddFriend :propsToSon="propsToSon" @propsToFather="propsToFather"/>
  </div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import AddFriend from '@/components/AddFriend/AddFriend.vue'
import {reqLogout} from '@/api/index.js'

export default {
  data () {
    return {
      showMenu: false,
      propsToSon: false // 传递给子组件，以显示添加好友modal
    }
  },
  computed: {
    ...mapState(['userInfo', 'imgBaseUrl', 'newFriendCount']),
    ...mapGetters(['totalCount']),
    isChats () {
      return this.$route.path === '/main/chats'
    },
    isContacts () {
      // return this.$route.path === '/main/contacts'
      return this.$route.path.indexOf('/main/contacts') !== -1 // 因为有子路由的存在，要这么判断
    },
    isDiscover () {
      return this.$route.path === '/main/discover'
    }
  },
  methods: {
    ...mapActions(['removeUserInfo']),
    goto (path) {
      this.$router.replace(path)
    },
    showLogoutModal () {
      this.showMenu = false // 关闭菜单
      this.$Modal.confirm({
        title: '退出登录',
        content: '确认退出登录吗？',
        onOk: () => {
          this.logout()
        }
      })
    },
    async logout () { // 退出登录
      const result = await reqLogout()
      if (result.success) {
        this.removeUserInfo()
        this.$router.replace('/login')
      } else {
        this.$Message.error(result.info)
      }
    },
    showAddFriendModal () {
      this.showMenu = false // 关闭菜单
      this.propsToSon = true // 将props置为true
    },
    propsToFather () { // 自定义事件，组件关闭时同步父组件的propsToSon为false
      this.propsToSon = false
    },
    showPersonal () {
      event.preventDefault()
    }
  },
  components: {
    AddFriend
  }
}
</script>

<style lang="stylus">
@import '~@/common/stylus/mixins.styl'
#side-guide
  position absolute
  top 0
  left 0
  bottom 0
  width 70px
  background-color #2f2f2f
  display flex
  flex-direction column
  border-radius 4px 0px 0px 4px
  z-index 58
  .guide-top
    flex 1
    margin-top 15px
    .guide-item
      text-align center
      height 70px
      position relative
      cursor pointer
      img
        display block
        width 65%
        height 65%
        margin 0 auto
        position absolute
        top 50%
        bottom 0
        left 0
        right 0
        transform translateY(-50%)
      .iconfont
        font-size 30px
        line-height 70px
        color #808080
      .ivu-badge-count
        top 15px
        box-shadow 0 0 0 1px #ed4014
      &.on
        .iconfont
          color #1aad19
  .guide-bottom
    flex 0 0 50px
    position relative
    .guide-item
      cursor pointer
      text-align center
      span
        color #808080
        font-size 25px
        line-height 70px
    .menu
      width 170px
      background-color #353535
      position absolute
      left 70px
      bottom 20px
      z-index 57
      &.show-enter-active, &.show-leave-active
        transition opacity .3s
      &.show-enter, &.show-leave-to
        opacity 0
      li
        height 50px
        color #808080
        font-size 17px
        line-height 50px
        padding-left 10px
        cursor pointer
        &:hover
          background-color #424242
</style>
